<template>
		<uni-card :is-shadow="false" is-full>
		<view class="topText">
			<text class="uni-h6">请输入手机号{{oldPhone}}的验证码完成密码修改</text>
		</view>
		<view class="auth-com">
			<uni-forms-item label="验证码" required name="auth">
				<uni-easyinput v-model="userFormData.auth" placeholder="请输入验证码" />
			</uni-forms-item>
			<text @click="getCode" class="ifgetauthcode" v-show="seconds === 0">获取验证码</text>
			<text v-show="seconds !== 0">{{seconds}}秒重新获取</text>
		</view>
		<uni-forms ref="userForm" :modelValue="userFormData" :rules="rules">
			<uni-forms-item label="新密码" required name="password" style="padding: 0;">
				<uni-easyinput v-model="userFormData.password" placeholder="请输入新密码" />
			</uni-forms-item>
		</uni-forms>
			<button type="primary" @click="submit">确认修改</button>
		</uni-card>
</template>

<script>
	export default {
		data() {
			return {
				oldPhone:'180***181',
				userFormData: {
					auth:'',
					password:''
				},
				rules: {
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入新密码',
						}]

					}	,
					auth: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]

					}

				},
				seconds:0
			}
		},
		onLoad() {},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.userForm.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs['userForm'].validate().then(res => {
					uni.showToast({
						title: `发起请求`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			getCode(){
				this.seconds = 60
				const st = setInterval(()=>{
					this.seconds --;
					 if(this.seconds === 0 ){
						 clearInterval(st)
					 }
				}, 1000);
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topText{
		margin-bottom: 20rpx;
	}
	.auth-com {
		display: flex;
		justify-content: space-between;
		padding: 0;
	}
	.ifgetauthcode{
		color: #0000FF;
	}
	.hui{
		color: #CCCCCC;
	}
</style>
